<template>
  <div class="item" v-loading="loading">
    <i class="el-icon-close del" @click="handleDel"></i>
    <ul>
      <li v-for="(item, index) in listData" :key="index">
        <label>{{item.label}}：</label>
        <span>{{item.text}}</span>
      </li>
      <li>
        <label style="color: #409EFF">启用状态：</label>
        <span style="color: #409EFF">{{item.isEnable ? '开启' : '关闭'}}</span>
      </li>
    </ul>
    <div class="btn-box">
      <el-button class="btn btn-switch" @click="handleSwitch">{{item.isEnable ? '关闭' : '开启'}}</el-button>
      <el-button class="btn btn-edit" @click="handleEdit">编辑</el-button>
    </div>
  </div>
</template>

<script>

import { delMetaDataTestItem, editMetaDataTestItem } from '../../../../../api/testItem/metadataTest'

export default {
  name: 'testItemMetaCategory',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    categoryData: {
      type: Array,
      default: () => ([])
    },
    dicSelectData: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      list: [{
        label: '检测项',
        text: ''
      }, {
        label: '检测门类',
        text: ''
      }, {
        label: '检测元数据',
        text: ''
      }, {
        label: '运算规则',
        text: ''
      }, {
        label: '检测参数',
        text: ''
      }, {
        label: '使用说明',
        text: ''
      }],
      radioList: [{
        label: '系统层',
        value: 1
      }, {
        label: '门类层',
        value: 2
      }, {
        label: '元数据层',
        value: 3
      }, {
        label: '人工检测',
        value: 4
      }],
      loading: false,
      treeData: []
    }
  },
  computed: {
    listData () {
      const listData = this.list
      listData[0].text = this.item.checkStandardItem // 检测项
      // listData[1].text = this.item.idCategory // 检测门类
      listData[2].text = this.item.mdName // 检测元数据
      // listData[3].text = this.item.checkOpRule // 运算规则
      listData[4].text = this.item.checkParam // 检测参数
      listData[5].text = this.item.useExplain // 使用说明
      this.dicSelectData.map(item => {
        // 运算规则
        if (item.dictValue === this.item.checkOpRule) {
          listData[3].text = item.dictLabel + '（' + item.dictValue + '）' // 运算规则
        }
      })
      const matchingCategoryName = (categoryData) => {
        categoryData.map(items => {
          // console.log(items.idCategory, this.item.idCategory)
          if (items.idCategory === this.item.idCategory) {
            listData[1].text = items.name
          }
          if (items.children) {
            matchingCategoryName(items.children)
          }
        })
      }
      matchingCategoryName(this.categoryData)

      return listData
    }
  },
  methods: {
    handleDel () {
      this.$confirm('该操作将永久删除该条信息，是否删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        delMetaDataTestItem([this.item.id]).then(res => {
          this.$message.success('删除操作成功！')
          this.$emit('handleDelSuccess')
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }).catch(() => {
      })
    },
    handleSwitch () {
      const obj = JSON.parse(JSON.stringify(this.item))
      obj.isEnable = !obj.isEnable
      this.loading = true
      editMetaDataTestItem(obj).then(res => {
        this.$message.success('操作成功！')
        this.$emit('handleSwitch')
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleEdit () {
      this.$emit('handleEdit')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../../styles/mixin";
  @import "../../../../../styles/skin/mixin";

  .item {
    border: 1px solid #409EFF;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    padding-bottom: 49px;
    padding-top: 20px;

    .del {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 20px;
      cursor: pointer;
      transition: linear 0.2s;

      &:hover {
        opacity: .8;
        transform: rotate(90deg);
      }
    }

    ul {
      padding: 12px 10px;

      li {
        @include fj;

        & + li {
          margin-top: 12px;
        }

        label {
          width: 100px;
          color: #333;
          text-align: right;
        }

        span {
          width: calc(100% - 105px);
          color: #666;
        }
      }
    }

    .btn-box {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      @include fj;

      .btn {
        flex: 1;
        margin: 0;
        border: none;
        color: #fff;
        border-radius: 0px;

        &.btn-switch {
          background: #409EFF;
        }

        &.btn-switch-close {
          background: #999;
        }

        &.btn-edit {
          @include bg_color(#a47320);
        }
      }
    }

  }
</style>
